<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>login</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background: linear-gradient(to right, #396dd0, #4cb9d8);
    }
    li,ul,ol{
        list-style: none;
    }
    a{
       text-decoration-line: none;
       float: right;
       padding-right: 20px;
       color: #6c6a6a;
    }
    form{
        height: 388px;
        width: 530px;
        margin: auto;
        align-items: center;
        background-color: #fff;
        margin-top: 138px;
        border-radius: 12px;
    }
    span{
        display: none;
       
    }
    input{
        height: 48px;
        width: 480px;
        margin:  20px auto;
        border: #ccc solid 1px;
        
    }
    .btn{
        background: linear-gradient(to right, #396dd0, #4cb9d8);
        color:#fff;
    }
    form>ul{
        padding-top: 30px;
    }
     form li{
         display: flex;
         justify-content: space-around;
         align-items: center;
         line-height: 50px;
    }
</style>
<body>
    <form action="">
        <ul>
            <li> 
                <input type="text" name="username" placeholder="    账号"><br>
            </li>
            <li>
                <input type="password" name="password" placeholder="    密码"><br>
            </li>
            <li><span></span><br></li>
            <li><input type="submit" class="btn" value="登录"></li>
         
    </ul>
    <a href="./注册.html">去注册</a>
    </form>
       
</body>
<script src="./axios.js"></script>
<script>
    var oTet1 = document.querySelector("[name=username]")
    var oTet2 = document.querySelector("[name=password]")
    var oForm = document.querySelector("form")
    var oSpan = document.querySelector("span")
    
    oForm.onsubmit = function(e){
        e.preventDefault()
        var username = oTet1.value
        var password = oTet2.value

        if(!username || !password) return alert("信息不完整，请重新输入！")

        axios({
            method: "post",
            url: "http://localhost:8888/users/login",
            headers: {
                "content-type":"application/x-www-form-urlencoded"
            },
            data: {
                username,
                password,
            }
        }).then(res => {
            console.log(res)
            if(res.data.code != 1){
                oSpan.innerText = '登录失败，请重新登录'
                oSpan.style.color = 'red'
                return;
            }
            localStorage.setItem("token",res.data.token)
            localStorage.setItem("id",res.data.user.id)
            alert ("登录成功！")
            location.href = 'index.html'
        })
    }
</script>
</html>